<template>
  <div v-show="isShow" style="background:white;width:100%;height:100%">
    <van-sticky v-show="visible">
      <van-progress style="margin-top:4px" :percentage="showRatio" stroke-width="8"/>
    </van-sticky>
    <van-form v-if="visible" @submit="onSubmit">
      <div class="star-title">{{formData.bt}}</div>
      <van-field
        v-for="(item, index) in formData.questions"
        :key="item.id"
        label-align="top"
        name="radio"
        :label="showLabel(item,index)"
        :rules="[{ required: true, message: '请填写调查' }]"
      >
        <template #input>
          <van-radio-group @click="selectScore(item)" v-model="item.answer" direction="horizontal">
            <van-radio v-for="rankItem in rank" :key="rankItem" :name="rankItem.value">{{rankItem.label}}</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="formData.userName"
        label-align="top"
        label="您的姓名"
        placeholder="请输入您的姓名"
        :rules="[{ required: true, message: '请填写您的姓名' }]" />
      <van-field
        v-model="formData.age"
        label-align="top"
        label="您的年龄"
        placeholder="请输入您的年龄"
        :rules="[{ required: true, message: '请填写您的年龄' }]" />
      <van-field
        v-model="formData.mobile"
        label-align="top"
        label="联系方式"
        placeholder="请输入联系方式"
        :rules="[{ required: true, message: '请填写您的联系方式' }]" />
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <van-empty image="error" style="padding-top: 40px" v-else :description="errorMsg" />
    <van-back-top bottom="90px"/>
  </div>
</template>

<script setup>
import router from '@/router'
import { ref, onMounted, computed } from 'vue'
import { getCode } from '@/api/system/code/CodeManager'
import { showLoadingToast, closeToast, showSuccessToast, showFailToast } from 'vant'
import { loadQuestion, savePublish } from '@/api/business/questions/publish/PublishForm'
import { QuestionReplyBean } from '@/model/business/questions/publish/PublishFormConstants'

const count = ref(0)
const rank = ref([])
const errorMsg = ref('')
const isShow = ref(false)
const selectCount = ref(0)
const visible = ref(false)
const formData = ref({ ...QuestionReplyBean })

const showLabel = computed(() => (item, index) => {
  return index + 1 + '、' + item.question
})

const showRatio = computed(() => {
  return count.value === 0 ? '0' : Math.round((selectCount.value / count.value) * 100)
})

const selectScore = (item) => {
  selectCount.value = formData.value.questions.reduce((pre, current) => pre + (current.answer ? 1 : 0), 0)
}

const onSubmit = (values) => {
  savePublish(formData.value).then(() => {
    showSuccessToast('提交成功！')
    router.replace({
      name: 'publishResult'
    })
  }).catch(error => {
    showFailToast(error.message || '提交失败！')
  })
}

onMounted(() => {
  showLoadingToast({
    duration: 0,
    forbidClick: true,
    message: '数据加载中...'
  })
  getCode('01GQS7803BBXCKZR7K5V3NEXVE').then(data => {
    rank.value = data
  })
  loadQuestion().then(data => {
    const { result, questionConfig, array, msg } = data
    visible.value = result
    if (result) {
      count.value = array.length
      formData.value.configId = questionConfig.id
      formData.value.year = questionConfig.year
      formData.value.bt = questionConfig.bt
      formData.value.questions = array.map((item) => {
        const { id, question, showOrder } = item

        const newItem = {
          questionId: id,
          configId: questionConfig.id,
          answer: '',
          answerText: '',
          question: question,
          showOrder: showOrder,
          year: questionConfig.year
        }
        return newItem
      })
    } else {
      errorMsg.value = msg
    }
    isShow.value = true
    closeToast()
  }).catch(error => {
    closeToast()
    showFailToast(error.message || '提交失败！')
  })
})
</script>

<style scoped>
.van-form {
  padding: 10px 10px 10px 10px
}
.star-title{
  font-size: 22px;
  text-align: center;
  margin-bottom: 20px;
}
.star-question-title {
  margin: 0;
  padding: 32px 16px 12px;
  color: var(--van-doc-text-color-4);
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
}
.van-radio {
  margin-top: 15px;
}
</style>
